<template>
  <div>
    <el-form :inline="inline" :model="formInline" label-position="right">
      <el-row :gutter="26" type="flex">
        <el-col :span="26">
          <el-form-item label="所在省份：" label-width="170">
            <el-input
              v-model.trim="formInline.province"
              maxlength="60"
              clearable
              placeholder="所在省份"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="所在区县：" label-width="170">
            <el-input
              v-model.trim="formInline.county"
              maxlength="60"
              clearable
              placeholder="所在区县"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="所在城市：" label-width="170">
            <el-input
              v-model.trim="formInline.city"
              maxlength="60"
              clearable
              placeholder="所在城市"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item label="年级：" label-width="170">
            <el-input
              v-model.trim="formInline.grade"
              maxlength="60"
              clearable
              placeholder="年级"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item label="课程：" label-width="170">
            <el-select
              style="width: 200px"
              v-model="formInline.course"
              filterable
              remote
              placeholder="请获取课程名称"
              :loading="loading"
              :remote-method="courseMethod"
            >
              <el-option
                v-for="item in couList"
                :key="item.course_name"
                :label="item.course_name"
                :value="item.course_name"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="周几：" label-width="170">
            <el-input
              v-model.trim="formInline.week"
              maxlength="60"
              clearable
              placeholder="请输入周一至周日"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="上课时间：" label-width="170">
            <el-time-picker
              v-model="formInline.tart_time"
              placeholder="请输入上课时间" 
              value-format="hh:mm:ss"
              :clearable="false"
              style="width: 200px"
            />
          </el-form-item>

          <el-form-item label="实际上课时间：" label-width="170">
            <el-date-picker
              :clearable="false"
              style="width: 200px"
              v-model="formInline.num_time"
              type="date"
              placeholder="请输入实际上课时间"
              :size="size"
              value-format="YYYY-MM-DD" 
            />
          </el-form-item>

          <el-form-item label="在地工作人员：" label-width="170">
            <el-select
              style="width: 200px"
              v-model="formInline.user_name"
              filterable
              remote
              placeholder="请输入在地工作人员名称"
              :loading="loading"
              :remote-method="userMethod"
            >
              <el-option
                v-for="item in userIdList"
                :key="item.username"
                :label="item.username"
                :value="item.username"
              />
            </el-select>
            
          </el-form-item>

          <el-form-item label="是否排课：" label-width="170">
            <el-select
              v-model="formInline.is_status"
              placeholder="是否排课"
              clearable
              style="width: 200px"
              @change="search(4, $event)"
            >
              <el-option
                v-for="item in isStatusList"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="核校状态" prop="status" label-width="170" v-if="status">
            <el-select
              v-model="formInline.status"
              placeholder="请选择核校状态"
              clearable
              style="width: 200px"
            >
              <el-option
                v-for="item in is_strise"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="日期选择：" label-width="170">
            <el-date-picker
            :editable="inline"
            class="date-picker-container"
              v-model="formInline.timeall"
              type="daterange"
              style="width: 200px"
              range-separator="-"
              value-format="YYYY-MM-DD"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :size="size"
            />
          </el-form-item> -->
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { setStorage, getStorage } from "@/utils/util";
export default {
  props: {
    
    // 是否内联 一般true是h5的情况下
    inline: {
      typeof: Boolean,
      default: true,
    },
    status:{
      typeof: Boolean,
      default: false,
    } 
  },
  data() {
    return {
      couList: [],
      userIdList:[],
      loading: false,
      courseObj: {},
      formInline: {},
      planList: [
        {
          value: "1",
          label: "待制定",
          id: "1",
        },
        {
          value: "2",
          label: "已制定",
          id: "2",
        },
      ],
      isStatusList: [
        {
          value: "1",
          label: "未排课",
          id: "1",
        },
        {
          value: "2",
          label: "已排课",
          id: "2",
        },
      ],
      inSchoolPlan: [
        {
          value: "1",
          label: "待审核",
          id: "1",
        },
        {
          value: "2",
          label: "已审核",
          id: "2",
        },
      ],
      linePlanList: [
        {
          value: "1",
          label: "是",
          id: "1",
        },
        {
          value: "2",
          label: "否",
          id: "2",
        },
      ],
      is_strise: [
      {
          value: "1",
          label: "待核校",
        },
        {
          value: "2",
          label: "已核校",
        },
        {
          value: "3",
          label: "驳回",
        },
        {
          value: "4",
          label: "已通过",
        },
        {
          value: "5",
          label: "问题校",
        },
      ],
      
    };
  },
  methods: {
    // 在地工作人员搜索
    userMethod(query) {
      const that = this;
      //console.log(query, "query");

      if (query) {
        this.loading = true;
        // 模拟异步操作
        setTimeout(() => {
          that.loading = false;
          that.userIdList = that.courseObj.zdguser.filter((item) => {
            return item.username.toLowerCase().includes(query.toLowerCase());
          });
        }, 200);
      } else {
        that.userIdList = [];
        that.loading = false;
      }
    },
    courseMethod(query) {
      const that = this;
      //console.log(query, "query");

      if (query) {
        this.loading = true;
        // 模拟异步操作
        setTimeout(() => {
          that.loading = false;
          that.couList = that.courseObj.course.filter((item) => {
            return item.course_name.toLowerCase().includes(query.toLowerCase());
          });
        }, 200);
      } else {
        that.couList = [];
        that.loading = false;
      }
    },
    search(i, e) {
      //   this.formInline.page = 1;
      //   this.formInline.per_page = 10;
      if (i === 1) {
        let objs = this.planList.find((item) => item.value == e);
        this.formInline.status = objs?.value;
        this.formInline.status_id = objs?.label;
      }
      if (i === 2) {
        this.formInline.instrument = this.linePlanList.find(
          (item) => item.value == e
        )?.value;
      }

      if (i === 3) {
        this.formInline.state = this.inSchoolPlan.find(
          (item) => item.value == e
        )?.value;
      }

      if (i === 4) {
        this.formInline.is_status = this.isStatusList.find(
          (item) => item.value == e
        )?.value;
      }
    },
    reset() {
      // 数据清空
      this.formInline = {};
    },
    // 清除空字段的函数
    clearEmptyFields(obj) {
      return Object.fromEntries(
        Object.entries(obj).filter(
          ([key, value]) =>
            value !== null && value !== undefined && value !== ""
        )
      );
    },

    returned() {
      // 数据返回
      //   this.formInline=this.clearEmptyFields(this.formInline) //清楚空的字段
      return this.formInline;
    },
  },
  mounted() {
    this.courseObj = JSON.parse(getStorage("courseObj"));
    let seobjs = this.$route.query;
    this.formInline = seobjs;
    
  },
};
</script>

<style scoped>
@media (max-width: 768px) {
  .el-date-picker {
    width: 100% !important;
  }
}
</style>
<style>
.date-picker-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.el-date-picker .el-input__inner {
  border-radius: 8px; /* 圆角边框，更符合触控习惯 */
}
</style>


